<template>
	<u-popup :show="show" mode="left" :round="20" closeOnClickOverlay @close="close" @open="open">
		<view class="toast">
			<view class="form">
				<view class="select">
					<view class="text"> <text>*</text>货号: </view>
					<input @input="change" v-model="user" type="text" placeholder="请选择货号" />
				</view>
			</view>
			<view class="userItem" style="height: calc(100vh - 300rpx);overflow: scroll;">
				<view @tap="$emit('saveUser',{proId:item.proId,id:item.id})" class="" v-for="(item, index) in searchArr"
					:key="index">
					{{ item.proId ? item.proId : "123" }}
				</view>
			</view>
			<view class="btn">
				<view @tap="search">查看更多</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				user: "",
				show: false,
				userArr: [],
				searchArr: [],
			};
		},
		methods: {
			// 模态框 orderCreateApi
			open() {
				this.show = true;
				this.$api.productListApi({
					data: {
						pageNo: 1,
						pageSize: 999,
					}
				}).then((res) => {
					if (res.code == 200) {
						this.userArr = res.result.list
						this.searchArr = res.result.list.filter(item => item.stt == '0');
					}
				});
			},
			// 模态框
			close() {
				this.show = false;
				this.$emit("close")
			},
			search() {
				this.$api.productListApi({
					data: {
						pageNo: 1,
						pageSize: 999
					}
				}).then((res) => {
					if (res.code == 200) {
						this.userArr = res.result.list;
						this.searchArr = res.result.list;
					}
				});
			},
			change() {
				this.searchArr = this.userArr.filter(item => item.proId.indexOf(this.user) != -1)
			},

		},
	};
</script>
<style lang="scss" scoped>
	.toast {
		font-size: 38rpx;
		padding: 16rpx 49rpx;
		border-radius: 29rpx;
		background: #fff;
		width: 500rpx;
		.btn {
			display: flex;
			justify-content: space-around;
			padding: 30rpx 0;

			view {
				width: 463rpx;
				height: 97rpx;
				background: rgba(254, 52, 48, 0);
				border: 3rpx solid #272727;
				border-radius: 49rpx;
				line-height: 97rpx;
				text-align: center;
				margin: auto;
			}
		}

		.userItem {
			height: calc(100% - 100rpx);
			overflow-y: auto;
			overflow-x: hidden;

			&>view {
				height: 70rpx;
				line-height: 70rpx;
			}
		}

		.form {
			height: 100rpx;
			border-bottom: 1px solid #f1f1f1;
			padding: 0 0 30rpx 0;

			.select {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.text {
					margin: 20rpx 0;
					color: #bdbdbd;
					margin-right: 20rpx;

					text {
						color: #fe3430;
					}
				}

				input {
					flex: 1;
					text-indent: 1em;
					height: 94rpx;
					background: #f2f2f2;
					border-radius: 47rpx;
				}

				.input {
					display: flex;
					align-items: center;
					justify-content: space-between;

					input {
						width: 271rpx;
					}

					text {
						text-align: left;
					}
				}
			}
		}
	}
</style>
